<template>
  <div
      class="card-container"
      :class="{ 'highlight': highlight, 'clickable': clickable }"
      @click="$emit('click')"
  >
    <div class="card-header">
      <slot name="header">
        <el-icon v-if="icon" class="card-icon">
          <component :is="icon" />
        </el-icon>
        <h3 v-if="title">{{ title }}</h3>
      </slot>
    </div>

    <div class="card-content">
      <slot></slot>
    </div>

    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  icon: Object,
  highlight: Boolean,
  clickable: {
    type: Boolean,
    default: false
  }
})

defineEmits(['click'])
</script>

<style lang="scss" scoped>
.card-container {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);

  &.highlight {
    border: 2px solid #409EFF;
    box-shadow: 0 8px 20px rgba(64, 158, 255, 0.15);
  }

  &.clickable {
    cursor: pointer;
    &:hover {
      transform: translateY(-5px);
    }
  }

  .card-header {
    margin-bottom: 1.5rem;
    text-align: center;

    .card-icon {
      font-size: 2.5rem;
      color: #409EFF;
      margin-bottom: 1rem;
    }

    h3 {
      margin: 0;
      font-size: 1.3rem;
    }
  }

  .card-content {
    color: #606266;
    line-height: 1.6;
  }

  .card-footer {
    margin-top: 1.5rem;
    border-top: 1px solid #ebeef5;
    padding-top: 1rem;
  }
}
</style>